<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title></title>
    <include file="public@head" />
    <link rel="stylesheet" href="__TMPL__public/assets/css/star.css"/>
</head>
<body>
<include file="public@starnav" />

<div class="center-s">

    <div class="sc_detail_wra">
        <!--明星发表的动态-->
        <div class="sc_list_box">
            <div class="main_comment clearfix">
                <div class="clearfix user_input_wrap">
                    <img class=" fl" src="" alt="">
                    <!--user_input_focus-->
                    <textarea placeholder="我也来说两句" name="" id="" class="user_input fr" cols="30" rows="10"></textarea>
                </div>
                <span id="send_btn_main" class="fr send_btn">评论</span>
                <span class="fr cancel_btn">取消</span>
            </div>
        </div>
        <!--评论列表-->
        <ul class="comments_wra clearfix"></ul>
    </div>
</div>






<include file="public@footer" />
<include file="public@starscripts" />

<script>
    $(function() {
        iService.headerMove(1);

        $(".user_input_wrap img").attr("src",localStorage.u_avatar);
//        sc_list_box
        var cid = iService.getQueryString("cid");
        var comments_wra = $(".comments_wra");
        var comment_input_move = function(){
            var comment_input = $(".user_input");
            comment_input.off("focus").on("focus",function(){
                $(this).stop().animate({"height":"90px"}, "fast");
            });
            comment_input.off("blur").on("blur",function(){
                if($(this).val()==""){
                    $(this).stop().animate({"height":"28px"}, "fast");
                }
            });
        };
        var reply_fun = function(){
            var user_name = localStorage.u_nickname;
            comment_input_move();
//            var reply_btn = $(".sub_comment_list .reply_btn");
            comments_wra.on("click",".reply_btn",function(){
                var reply_name = $(this).data("name");
                var c_udid = $(this).data("c_udid");
                var parentid = $(this).data("c_parudid");
                var input_wrap =  $(this).parents(".comment_list").children(".new_comment");
                input_wrap.slideDown();
                input_wrap.find(".user_input").attr("placeholder",user_name+"回复"+reply_name);
                input_wrap.find(".user_input").attr({"data-c_udid":c_udid,"data-user_name":user_name,"data-reply_name":reply_name,"data-parentid":parentid});
            });
            comments_wra.on("click",".new_comment .send_btn",function(){
                var send_this = $(this);
                var description = $(this).parents(".new_comment").find(".user_input").val();
                var pudid = $(this).parents(".new_comment").find(".user_input").data("c_udid");
                var user_name = $(this).parents(".new_comment").find(".user_input").data("user_name");
                var reply_name = $(this).parents(".new_comment").find(".user_input").data("reply_name");
                var parentid = $(this).parents(".new_comment").find(".user_input").data("parentid");
                var comList_param = {
                    url:'Circles/comSend',
                    data:{
                        cid: cid,
                        description: description,
                        parent: parentid,
                        pudid: pudid,
                        type: 20
                    }
                };
                $.JsonRpc(comList_param,function(data){
                    var sub_comment_list = send_this.parents(".comment_list").find(".sub_comment_list");
                    var tpl =
                            '<div class="sub_comment">'+
                            '<div class="info">'+
                            '<span class="name">'+user_name+"：回复"+reply_name+'</span><span class="time">'+new Date(parseInt(data.time) * 1000).toLocaleString().replace(/:\d{1,2}$/,'')+'</span>'+
                            '</div>'+
                            '<p class="comment">'+data.content.description+'</p>'+
                            '<div class="sub_tool_group clearfix">'+
                            '<span data-name="'+user_name+'" data-c_udid="'+pudid+'" class="reply_btn fl">回复</span>'+
                            '<span class="detel_btn fr">删除</span>'+
                            '</div>'+
                            '</div>';
                    $(tpl).prependTo(sub_comment_list);
                    send_this.parents(".new_comment").find(".user_input").val("");
                    comment_input_move();
//                    .find(".comment_list")
//                    .sub_comment_list
                });
            });
            comments_wra.on("click",".new_comment .cancel_btn",function(){
                $(this).parents(".new_comment").slideUp();
                $(this).parents(".new_comment").find(".user_input").val("").trigger("blur");
            });

            comments_wra.on("click",".main_comment .cancel_btn",function(){
                $(this).parents(".main_comment").find(".user_input").val("").trigger("blur");
            });
        };

        //主帖
        var comList_param = {
            url:'Circles/comList',
            data:{
                cid: cid,
                type:"20",
                page:1
            }
        };
        $.JsonRpc(comList_param,function(data){
            var result = data.data;
            data = result.list;
            var img_all = "",li_all="";
            var img_arr = [];
            if(result.c_images){
                img_arr = String(result.c_images).split(",");
                for(var i=0;i<img_arr.length;i++){
                    img_all += '<a class="fl big-cursor" href="javascript:void(0)"><img src="'+img_arr[i]+'" alt=""></a>';
                    li_all +=
                    '<li class="fl" data-src="'+img_arr[i]+'">'+
                        '<a href="javascript:;" class="fl">'+
                            '<img class="S_line2" src="'+img_arr[i]+'" alt="">'+
                        '</a>'+
                    '</li>';
                }
            }

            var likeClassName = "";
            (result.booked==10)?likeClassName = "active":likeClassName = "";
            var tpl_main =
                    '<div class="sc_list_box" id="cid'+result.cid+'">'+
                    '<div class="sc_title clearfix">'+
                    '<img class="star_img fl" src="'+result.u_avatar+'" alt="">'+
                    '<div class="fl">'+
                    '<h4 class="star_name">'+result.u_nickname+'</h4>'+
                    '<p class="star_publish_time">'+iService.timeFormat(result.c_createtime)+'</p>'+
                    '</div>'+
                    '</div>'+
                    '<p class="star_publish_txt">'+result.c_content+'</p>'+
                    '<div class="imgWra clearfix">'+
                    img_all+
                    '</div>'+
                    '<div class="dn_media_view displayNone">'+
                        '<div class="media_show_box" data-pic-length="'+img_arr.length+'" data-cur-index="">'+
                            '<img src="" alt="">'+
                        '</div>'+
                        '<div class="pic_choose_box">'+
                            '<div class="stage_box">'+
                                '<ul class="choose_box clearfix" style="margin-left: 1px;">'+
                                    li_all+
                                '</ul>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                    '<ul class="sc_row_line clearfix">'+
                    '<li>'+
                    '<span class="c_like">'+result.c_like+'</span>'+
                    '<i class="ic_praise '+likeClassName+'" data-cid="'+cid+'"></i>'+
                    '</li>'+
                    '<li>'+
                    '<span>'+result.c_comment+'</span>'+
                    '<i class="ic_comment"></i>'+
                    '</li>'+
                    '<li>'+
                    '<span>'+result.c_share+'</span>'+
                    '<i class="ic_share"></i>'+
                    '</li>'+
                    '</ul>'+
                    '</div>';
            $(tpl_main).prependTo(".sc_list_box");
            view_original_pic();
            function view_original_pic(){

                $(".imgWra a").on("click",function(){
                    var cur_index = $(this).index();
                    var cur_src = $(this).children("img").attr("src");
                    $(this).parents(".imgWra").siblings(".dn_media_view").show();
                    $(this).parents(".imgWra").siblings(".dn_media_view").find(".media_show_box").attr("data-cur-index",cur_index);
                    $(this).parents(".imgWra").hide();
                    $(this).parents(".imgWra").siblings(".dn_media_view").find(".media_show_box img").attr("src",cur_src);
                    $(this).parents(".imgWra").siblings(".dn_media_view").find(".choose_box li").eq(cur_index).addClass("current").siblings("li").removeClass("current");


                });


                function getX(obj){
                    var parObj=obj;
                    var left=obj.offsetLeft;
                    while(parObj=parObj.offsetParent){
                        left+=parObj.offsetLeft;
                    }
                    return left;
                }

                function getY(obj){
                    var parObj=obj;
                    var top=obj.offsetTop;
                    while(parObj = parObj.offsetParent){
                        top+=parObj.offsetTop;
                    }
                    return top;
                }

                function DisplayCoord(media_show_wrap,event){
                    var top,left,oDiv,cur_index,cur_length,pos_x;
                    oDiv=media_show_wrap;
                    top=getY(oDiv);
                    left=getX(oDiv);
                    pos_x = (event.clientX-left+document.body.scrollLeft);
                    cur_index = $(oDiv).attr("data-cur-index");
                    cur_length = $(oDiv).attr("data-pic-length")-1;
                    console.log(cur_index+"==="+cur_length);
                    $(oDiv).removeClass("small-cursor").removeClass("right-cursor").removeClass("left-cursor");
                    if(pos_x<120&&cur_index>0){
                        $(oDiv).addClass("left-cursor");
                    }else if(pos_x>=120&&pos_x<=540){
                        $(oDiv).addClass("small-cursor");
                    }else if(pos_x>540&&cur_index<cur_length){
                        $(oDiv).addClass("right-cursor");
                    }
//        document.getElementById("mp_y").innerHTML = (event.clientY-top+document.body.scrollTop) -2+"px";
                }
                $(".media_show_box").on("mousemove",function(e){
                    DisplayCoord(this,e);
                });

                $(".media_show_box").on("click",function(e){
                    DisplayCoord(this,e);
                });

                $(".dn_media_view").on("click",".right-cursor",function(){
                    var cur_index,cur_li,cur_src;
                    cur_index = parseInt($(this).attr("data-cur-index"))+1;
                    $(this).attr("data-cur-index",cur_index);
                    cur_li = $(this).parents(".dn_media_view").children(".pic_choose_box").find(".choose_box li").eq(cur_index);
                    cur_li.addClass("current").siblings("li").removeClass("current");
                    cur_src = cur_li.attr("data-src");
                    $(this).children("img").attr("src",cur_src);
                });
                $(".dn_media_view").on("click",".left-cursor",function(){
                    var cur_index,cur_li,cur_src;
                    cur_index = $(this).attr("data-cur-index")-1;
                    $(this).attr("data-cur-index",cur_index);
                    cur_li = $(this).parents(".dn_media_view").children(".pic_choose_box").find(".choose_box li").eq(cur_index);
                    cur_li.addClass("current").siblings("li").removeClass("current");
                    cur_src = cur_li.attr("data-src");
                    $(this).children("img").attr("src",cur_src);
                });
                $(".dn_media_view").on("click",".small-cursor",function(){
                    $(this).parents(".dn_media_view").siblings(".imgWra").show();
                    $(this).parents(".dn_media_view").hide();
                });

                $(".choose_box li").on("click",function(){
                    var cur_src,cur_index;
                    cur_src = $(this).attr("data-src");
                    cur_index = $(this).index();
                    $(this).addClass("current").siblings("li").removeClass("current");
                    $(this).parents(".dn_media_view").children(".media_show_box").attr("data-cur-index",cur_index);
                    $(this).parents(".dn_media_view").children(".media_show_box").children("img").attr("src",cur_src);
                });



            }


            //点赞帖子
            $(".ic_praise").off("click").on("click",function(){
                var ic_prize_now = $(this);
                var cid = $(this).data("cid");
                var praise_param = {
                    url:'Circles/likeCircle',
                    data:{
                        cid: cid
                    }
                };
                $.JsonRpc(praise_param,function(data){
                    if(data.code==200){
                        if(data.data.status==10){
                            ic_prize_now.addClass('layui-anim layui-anim-scaleSpring active');
                            ic_prize_now.siblings(".c_like").html(data.data.number);
                        }else if(data.data.status==20){
                            ic_prize_now.removeClass('layui-anim layui-anim-scaleSpring active');
                            ic_prize_now.siblings(".c_like").html(data.data.number);
                        }
                    }
                })
            });
            var tpl = "";
            $.each(data,function(i){
                tpl +=
                        '<li class="clearfix comment_list">'+
                        '<div class="auth_comment">'+
                        '<img class="fl auth_pic" src="'+data[i].u_avatar+'" alt="">'+
                        '<div class="info fl">'+
                        '<p class="name">'+data[i].u_nickname+'</p>'+
                        '<p class="time">'+data[i].c_createtime.slice(0,16)+'</p>'+
                        '</div>'+
                        '<p class="comment" style="clear:both">'+data[i].c_content+
                        '</p>'+
                        '<div class="sub_tool_group clearfix">'+
                        '<span data-name="'+data[i].u_nickname+'" data-cid="'+data[i].cid+'" data-c_udid="'+data[i].c_udid+'" data-c_parudid="'+data[i].cid+'" class="reply_btn fl">回复</span>'+
//                                    '<span class="detel_btn fr">删除</span>'+
                        '</div>'+
                        '</div>'+
                        '<div class="sub_comment_list">';

                if(data[i].children){
                    for(var k=0;k<data[i].children.length;k++){
                        tpl +=
                                '<div class="sub_comment">'+
                                '<div class="info">'+
                                '<span class="name">'+data[i].children[k].cnickname+"：回复"+data[i].children[k].pnickname+'</span><span class="time">'+data[i].children[k].c_createtime.slice(0,16)+'</span>'+
                                '</div>'+
                                '<p class="comment">'+data[i].children[k].c_content+'</p>'+
                                '<div class="sub_tool_group clearfix">'+
                                '<span data-name="'+data[i].children[k].cnickname+'"  data-cid="'+data[i].children[k].cid+'" data-c_udid="'+data[i].children[k].c_udid+'" data-c_parudid="'+data[i].children[k].c_parent+'" class="reply_btn fl">回复</span>'+
//                            '<span class="detel_btn fr">删除</span>'+
                                '</div>'+
                                '</div>';
                    }
                }
                tpl +=
                        '</div>'+
                        '<!--评论input-->'+
                        '<div class="new_comment clearfix displayNone">'+
                        '<div class="clearfix user_input_wrap">'+
                        '<textarea placeholder="" name="" id="" class="user_input fr" cols="30" rows="10"></textarea>'+
                        '</div>'+
                        '<span class="fr send_btn">回复</span>'+
                        '<span class="fr cancel_btn">取消</span>'+
                        '</div>'+
                        '</li>';
            });
            $(".comments_wra").html(tpl);
            reply_fun();
        });
        //主评论
        var send_btn_main = $("#send_btn_main");
        send_btn_main.on('click',function(){
            var comList_param = {
                url:'Circles/comSend',
                data:{
                    cid: cid,
                    description: $(".main_comment .user_input").val(),
                    parent: 0,
                    pudid: 0,
                    type: 20
                }
            };
            $.JsonRpc(comList_param,function(data){
                if(data.code==200){
                    data = data.data;

                    var tpl =
                            '<li class="clearfix comment_list">'+
                            '<div class="auth_comment">'+
                            '<img class="fl auth_pic" src="'+data.comment.u_avatar+'" alt="">'+
                            '<div class="info fl">'+
                            '<p class="name">'+data.comment.u_nickname+'</p>'+
                            '<p class="time">'+data.comment.c_createtime.slice(0,16)+'</p>'+
                            '</div>'+
                            '<p class="comment" style="clear:both">'+data.comment.c_content+
                            '</p>'+
                            '<div class="sub_tool_group clearfix">'+
                            '<span data-name="'+data.comment.u_nickname+'" data-cid="'+data.comment.cid+'" data-c_udid="'+data.comment.c_udid+'" data-c_parudid="'+data.comment.cid+'" class="reply_btn fl">回复</span>'+
                                //                        '<span class="detel_btn fr">删除</span>'+
                            '</div>'+
                            '</div>'+
                            '<div class="sub_comment_list">'+
                            '</div>'+
                            '<!--评论input-->'+
                            '<div class="new_comment clearfix displayNone">'+
                            '<div class="clearfix user_input_wrap">'+
                            '<textarea placeholder="" name="" id="" class="user_input fr" cols="30" rows="10"></textarea>'+
                            '</div>'+
                            '<span class="fr send_btn">回复</span>'+
                            '<span class="fr cancel_btn">取消</span>'+
                            '</div>'+
                            '</li>';
                    $(tpl).prependTo(".comments_wra");
                    $(".main_comment .user_input").val("");
                    comment_input_move();
                }
            });
        });



    })
</script>

</body>
</html>